<template>
  <div class="block">
    <px-dialog v-model="dialogVisible" title="转审" width="50%" align-center>
      <ColumnsTable :columns="columns" :data="data" />
      <px-form ref="checkFormRef" :inline="false" :model="formValue" label-position="right" label-width="100px">
        <px-form-item label="任务转审" prop="acceptorId" :rules="[{ required: true, message: '验收人不能为空', trigger: 'change' }]">
          <px-select-v2
            v-model="formValue.acceptorId"
            style="width: 100%"
            filterable
            clearable
            :options="approverIdList"
            placeholder="请选择验收人"
            @change="approverIdChange"
        /></px-form-item>
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="dialogVisible = false">取消</px-button>
          <px-button type="primary" @click="handleSubmit"> 确认 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { forwardReview } from "@/api/erc/inspectTask";
import { getEmployeeIdAndName } from "@/utils/pengxi";
import { PxMessage } from "px-ui";
import { onBeforeMount, reactive, ref } from "vue";
import ColumnsTable from "../../components/ColumnsTable.vue";
const props = defineProps(["data"]);
const dialogVisible = defineModel("dialogVisible");
const columns = reactive([
  [
    {
      label: "巡检任务编号",
      value: "taskNo"
    },
    {
      label: "地块",
      value: "factoryAreaDesc"
    }
  ],
  [
    {
      label: "任务开始时间",
      value: "startTime"
    },
    {
      label: "任务结束时间",
      value: "endTime"
    }
  ]
]);
// 验收表单
const checkFormRef = ref();
// 验收人表单的值
const formValue = ref<{ acceptor?: string; acceptorId?: number }>({});
// 验收人表单
const approverIdList = ref([]);

const emits = defineEmits(["refresh"]);
// 获取审批人名称
const approverIdChange = val => {
  const arr = approverIdList.value.filter(item => {
    return item.value === val;
  });

  if (arr && arr.length > 0) {
    formValue.value.acceptor = arr[0].label;
    formValue.value.acceptorId = arr[0].value;
  }
};
// 转审——提交
const handleSubmit = async () => {
  checkFormRef.value.validate(async valid => {
    if (valid) {
      await forwardReview({
        id: props.data.id,
        taskNo: props.data.taskNo,
        ...formValue.value
      });
      emits("refresh");
      dialogVisible.value = false;
      PxMessage.success("转审成功");
    }
  });
};
// 获取下拉框
const querySelect = async () => {
  const arr = await getEmployeeIdAndName(["HSE", "ISEP", "ERC&FP"]);
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  approverIdList.value = arr.filter(item => {
    return item.userId !== userInfo.userId;
  });
  // approverIdList.value = await getEmployeeIdAndName(["HSE", "ISEP", "ERC&FP"]);
};
onBeforeMount(() => {
  querySelect();
});
</script>
<style lang="scss" scoped>
.inspect-form {
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }

  :deep(.px-button + .px-button) {
    margin-left: 8px;
  }
}

.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}

.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }
  :deep(.px-table__cell) {
    padding: 0;
    height: 36px;
    line-height: 36px;
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}

.inspect-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}
</style>
